<template>
	<view class="myQrCode">
		<view class="topArea">
			<image v-if="imgUrl" class="qrImage" :src="baseUrl+imgUrl" mode="aspectFill"></image>
			<view  v-else class="noQrImage">暂无收款码</view>
			<tui-upload class="upload-wrap" :bucketType="bucketType" :clearFlag="clearFlag" :limit="limit" :useType="'qrCode'" @complete="getImgResult($event)">
				<text class="showText">{{imgUrl?'更改收款二维码':'上传收款二维码'}}</text>
			</tui-upload>
		</view>
		<view class="bottomArea">
			
			<view class="description">
				<view>此处仅供经销商提供个人收款码。</view>
				<view>如因个人操作失误造成损失，请后果自负。</view>
			</view>
			
			<view class="buttonBox">
				<tui-button class="btn1" :bucketType="bucketType" width="240rpx" height="80rpx" :size="30" type="lightgray" shape="circle" 
				@tap="cancelSettlement">取消</tui-button>
				<tui-button width="240rpx" height="80rpx" :size="30" type="danger" shape="circle" @tap="sureSettlement"
				:disabled="!imgUrl">确定</tui-button>
			</view>
			<view class="descriptionTip">
							<view style="font-weight: bold;">关于收款的温馨提示</view>
							<view style="text-align: justify;">
			已收款请点击“确定”按钮进行确认；如未点击“确定”按钮，系统默认24小时后自动确认。如不及时点击“确定”按钮，将影响顾客退换货起始时间和顾客积分激活生效时间，请知悉。</view>
			</view>
		</view>
		<loading></loading>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import tuiButton from '@/components/button/button';
	import tuiUpload from '@/components/tui-upload/tui-upload.vue';
	export default {
		data() {
			return {
				limit: 1,
				imgUrl: '',
				clearFlag: false,
				baseUrl:this.$store.state.imgUrl,
				orderId:'',//订单orderId
				version:'',
				flag:'',//标记是上传"1"还是更改"2"
				bucketType: 'es',//上传文件额外参数
				backFlag:true,
			}
		},
		components: {
			tuiUpload,
			tuiButton 
		},
		onLoad(options) {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			this.orderId=options.orderId;
			this.version=options.version;
			
			this.getCollectionQrCode();
		},
		methods: {
			getImgResult(e) {
				console.log(e)
				if (e.status == 1 && e.imgArr && e.imgArr.length > 0) {
					this.imgUrl = e.imgArr[0];
					this.submitImage();
				} else if(e.status == 3) {
					this.$util.msg('上传失败，请重新上传');
				}
			},
			submitImage() {
				let params = {
					qrCode: this.imgUrl,
				}
				this.$http.updateCollectionQrCode(params).then((res) => {
					if(res.status == 0) {
						let title='';
						if(this.flag==='1'){//首次上传
							this.flag='2'
							uni.showToast({
								title: "收款二维码上传成功",
								icon: "none",
								duration: 1000
							});
							
						}else if(this.flag==='2'){
							uni.showToast({
								title: "收款二维码更改成功",
								icon: "none",
								duration: 1000
							});
						}
						
						
					}
				})
				
			},
			sureSettlement(){
				let params={
					orderId:this.orderId,
					version:this.version
				}
				this.$http.sureSettlement(params).then((res) => {
					if (res.status == 0) {
						let orderCode=res.data.orderCode;
						let realAmount=res.data.realAmount;
						this.backFlag=false;
						uni.redirectTo({
							url: `/packageC/pages/storeCart/settlementResult?orderCode=${orderCode}&realAmount=${realAmount}`
						});
					}
				})
			},
			cancelSettlement() {//取消结算
				let params={
					orderId:this.orderId,
					version:this.version
				}
				this.$http.cancelSettlement(params).then((res) => {
					if (res.status == 0) {
						uni.showToast({
							title: "结算已取消!",
							icon: "none",
							duration: 1000
						});
						// uni.navigateBack();
						
						uni.redirectTo({
							url: '/packageC/pages/storeOrder/storeOrder'
						});
					}
				})
			},
			getCollectionQrCode() {
				this.$http.initCollectionQrCode().then((res) => {
					if (res.status == 0) {
						if(res.data != null) {
							this.imgUrl = res.data;//收款二维码
							if(this.imgUrl){
								this.flag='2'
							}else{
								this.flag='1'
							}
							
						}
					}
				})
			},
			onUnload() {
				this.$eventHub.$emit('storeCartRefresh')
			}
		}
	}
</script>

<style lang="scss">
	.myQrCode {
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 110rpx;

		.topArea {
			width: 400rpx;
			height: 400rpx;
			.noQrImage {
				width: 400rpx;
				height: 400rpx;
				background: #EEEEEE;
				color: #999999;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.qrImage {
				width: 400rpx;
				height: 400rpx;
			}
			.showText {
				display: inline-block;
				width: 400rpx;
				color: #608AFF;
				font-size: 28rpx;
				text-align: center;
				margin-top: 40rpx;
			}
		}

		.bottomArea {
			margin-top: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
	
			
			.buttonWrapper {
				width: 100%;
				margin-top: 60rpx;
				margin-bottom: 30rpx;
				height: 80rpx;
			}

			.buttonBox {
				margin-top: 60rpx;
				margin-bottom: 30rpx;
				display: flex;

				.btn1 {
					margin-right: 20rpx;
				}

			}
			.description {
				font-size: 24rpx;
				color: #999999;
				margin-top: 30rpx;
				text-align: center;
				padding: 0 32rpx;
			}
			.descriptionTip{
				font-size: 22rpx;
				
				color: #a3a3a3;
				margin-top: 30rpx;
				text-align: center;
				padding: 0 32rpx 30rpx 32rpx;
			}
		}
	}
</style>

